<template>
	<div class="hotphoto">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>热度图片列表</span></i>
				<button><router-link to="/admin/hotphoto"><i class="el-icon-refresh-right"></i></router-link></button>
			</aside>
			<hr/>
			<button><router-link to="/admin/edithotphoto">添加新的热度图片</router-link></button>
		</div>
		<div class="div2">
			<el-table :data="hotlist" size="medium" border style="width: 100%">
				<el-table-column prop="memo" label="描述"></el-table-column>
			    <el-table-column prop="type" label="类型"></el-table-column>
			    <el-table-column prop="hot" label="优先级"></el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<img :src="`${$ip}/api/public/showimg/${scope.row.picture}`"
							style="width: 60px;height: 60px;border-radius: 5px;">
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="go2update(scope.row.id)">
							修改
						</el-button>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="remove(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	name:'HotPhoto',
	data(){
		return{
			hotlist:[],
			act:''
		}
	},
	methods:{
		findhot(){
			this.$get('/api/adm/hot/findAll').then((resp)=>{
				this.hotlist =resp.data.data;
				console.log(this.hotlist);
			})
		},
		go2update(id){
			this.$router.push({path:'/admin/edithotphoto',query:{id:id,act:'修改'}})
		},
		remove(id){
			console.log(id);
			this.$get("/api/adm/hot/remove/"+id).then((resp)=>{
				
				this.$message({
					message:'删除成功',
					type:'success'
				})
				this.findhot();
			})
		}
	},
	mounted(){
		this.findhot();
	}
}
</script>

<style scoped>
a{
	color: white;
}
.hotphoto{
	width: 78%;
	margin: 0 auto;
}
.hotphoto .div1{
	margin-top: 15px;
}
.hotphoto .div1 aside{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hotphoto .div1 aside span{
	margin-left: 8px;
}
.hotphoto .div1 aside button{
	width: 80px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
	margin-right: 2vw;
	font-size: 18px;
}
.hotphoto .div1 button{
	width: 150px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
}
.hotphoto .div2{
	margin-top: 10px;
}
</style>
